import React, { Component } from 'react'
import { toast } from 'react-toastify'
import { updateContact, updateContactSuccess, getUserInfo2 } from 'utils/Api'
class Email extends Component {
  constructor() {
    super()
    this.state = {
      email: '',
      modify: false,
      success: false
    }
  }
  componentDidMount() {
    getUserInfo2()
      .then(({ msg, result }) => {
        if (msg === '200') {
          this.setState({
            email: result.email || ''
          })
        }
      })
  }
    changeValue = (e) => {
      this.setState({
        email: e.target.value
      })
    }
    activeModify = (e) => {
      e.preventDefault()
      this.setState({
        modify: true
      })
    }
    getCode = (e) => {
      e.preventDefault()
      const {success} = this.state
      if (success) {
        return
      }
      this.setState({
        success: true
      })
      var fd = new FormData()
      fd.append('verifyWay', 1)
      fd.append('verify', this.state.email)
      updateContact(fd)
        .then(({ msg }) => {
          if (msg === '200') {
            toast.success('邮箱发送成功', {
              autoClose: 1000
            })
           
            this.setState({
              success: false,
            })
          }
        }).catch(err => {
          toast.success('邮箱发送成功', {
            autoClose: 1000
          })
          this.setState({
            success: false,
          })
        })
        
    }
    submit = (e) => {
      updateContactSuccess().then(e => console.log(e))
    }
    cancel = (e) => {
      this.setState({
        modify: false
      })
    }
    render() {
      return (
        <form onSubmit={this.submit}>
          <div className='box'>
            <label htmlFor="email">邮箱：</label>
            <input type="email" disabled={!this.state.modify} name="email" id="email"
              value={this.state.email}
              onChange={this.changeValue} />
            {!this.state.modify ?
              <div className='noModify'><a href="#" onClick={this.activeModify}>更改</a></div>
              : <div className='modify'>
                <a href="#" onClick={this.getCode}>{this.state.success ? '邮件发送中...' : '发送邮箱验证'}</a>
                {/* <input type="text" name='code' className='code' placeholder='输入验证码' />
                            <input type="submit" value="保存" className='submit' />*/}
                <input type="button" value="取消" className='submit' onClick={this.cancel}/> 
              </div>
            }
            {/* {this.state.success && <div className='tips'>发送成功!!</div>} */}
          </div>

        </form>
      )

    }
}

export default Email